<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>理想生活上天猫，登录页面</title>
    <r th:insert="common/header::#headerApp"/>
</head>

<body>
<div id="app">
    <el-row :gutter="20">
        <el-col :span="24">&nbsp;</el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="4">
            <img alt="我是一只天猫" src="//img.alicdn.com/tfs/TB11ojWRXXXXXafaFXXXXXXXXXX-190-27.png">
        </el-col>
        <el-col :span="19">&nbsp;</el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="15">
            <img alt="九寨沟" src="/images/JiuZhaiGou.jpg" width="800" height="490">
        </el-col>

        <el-col :span="7">
            <template>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="密码登录" name="first">
                        <el-form ref="form" :model="userForm" label-width="80px">
                            <el-row>
                                <el-input placeholder="会员名/邮箱/手机号" prefix-icon="el-icon-user" v-model="userForm.name"></el-input>
                            </el-row>
                            <el-row>
                                <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="userForm.password" show-password></el-input>
                            </el-row>
                            <el-row>
                                <el-button @click="login" type="danger">登录</el-button>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="短信登录" name="second">短信登录</el-tab-pane>
                </el-tabs>
            </template>
        </el-col>
        <el-col :span="2">&nbsp;</el-col>
    </el-row>

</div>

<r th:replace="common/footer::.footerApp"/>
<script src="/js/request.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userForm:{}, activeName: 'first'
        },
        methods: {
            login() {
                request({
                    url: '/book/login',method: 'post',data: this.userForm,
                    headers: {
                        'content-type': 'application/json;charset=UTF-8',"token": ''
                    }
                }).then(response=>{
                    var res = response.data;
                    this.$message(res.message);
                })
            },
            handleClick(tab, event) {
                //console.log(tab, event);
            }
        }
    });
</script>
</body>
</html>